<template>
  <div>
    <el-table v-loading="pageLoading" :data="pageVO.list" border fit highlight-current-row style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <!-- 业务类型（0其它 1新增 2修改 3删除） -->
            <el-form-item label="业务类型:">
              <span v-if="props.row.businessType ==0">其它</span>
              <span v-if="props.row.businessType ==1">新增</span>
              <span v-if="props.row.businessType ==2">修改</span>
              <span v-if="props.row.businessType ==3">删除</span>
            </el-form-item>
            <el-form-item label="业务类型数组:">
              <span>{{ props.row.businessTypes }}</span>
            </el-form-item>
            <el-form-item label="错误消息:">
              <span>{{ props.row.errorMsg }}</span>
            </el-form-item>
            <el-form-item label="返回参数:">
              <span>{{ props.row.jsonResult }}</span>
            </el-form-item>
            <el-form-item label="请求方法:">
              <span>{{ props.row.method }}</span>
            </el-form-item>
            <!-- 操作类别（0其它 1后台用户 2手机端用户） -->
            <el-form-item label="操作类别:">
              <span v-if="props.row.operatorType ==0">其它</span>
              <span v-if="props.row.operatorType ==1">后台用户</span>
              <span v-if="props.row.operatorType ==2">手机端用户</span>
            </el-form-item>
            <el-form-item label="日志主键:">
              <span>{{ props.row.operId }}</span>
            </el-form-item>
            <el-form-item label="操作地址:">
              <span>{{ props.row.operIp }}</span>
            </el-form-item>
            <el-form-item label="操作人员:">
              <span>{{ props.row.operName }}</span>
            </el-form-item>
            <el-form-item label="操作人员名称:">
              <span>{{ props.row.personId }}</span>
            </el-form-item>
            <el-form-item label="请求参数:">
              <span>{{ props.row.operParam }}</span>
            </el-form-item>
            <el-form-item label="操作时间:">
              <span>{{ props.row.operTime }}</span>
            </el-form-item>
            <el-form-item label="请求url:">
              <span>{{ props.row.operUrl }}</span>
            </el-form-item>
            <el-form-item label="请求方式:">
              <span>{{ props.row.requestMethod }}</span>
            </el-form-item>
            <!-- 操作状态（0正常 1异常） -->
            <el-form-item label="操作状态:">
              <span v-if="props.row.status ==0">正常</span>
              <span v-if="props.row.status ==1">异常</span>
            </el-form-item>
            <el-form-item label="操作模块:">
              <span>{{ props.row.title }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="业务类型" prop="businessType" :formatter="businessType1">
      </el-table-column>
      <el-table-column label="业务类型数组" prop="businessTypes">
      </el-table-column>
      <el-table-column label="错误消息" prop="errorMsg">
      </el-table-column>
      <el-table-column label="返回参数" prop="jsonResult">
      </el-table-column>

      <el-table-column label="请求方法" prop="method">
      </el-table-column>
      <el-table-column label="操作类别" prop="operatorType" :formatter="operatorType1">
      </el-table-column>
      <el-table-column label="日志主键" prop="operId">
      </el-table-column>
      <el-table-column label="操作地址" prop="operIp">
      </el-table-column>
      <el-table-column label="操作人员" prop="operName">
      </el-table-column>
      <el-table-column label="操作人员名称" prop="personId">
      </el-table-column>
      <el-table-column label="返回参数" prop="jsonResult">
      </el-table-column>
      <el-table-column label="请求参数" prop="operParam">
      </el-table-column>
      <el-table-column label="操作时间" prop="operTime">
      </el-table-column>
      <el-table-column label="请求url" prop="operUrl">
      </el-table-column>
      <el-table-column label="请求方式" prop="requestMethod">
      </el-table-column>
      <el-table-column label="操作状态" prop="status" :formatter="status1">
      </el-table-column>
      <el-table-column label="操作模块" prop="title">
      </el-table-column>
    </el-table>
    <pagination v-show="pageVO.total>0" :total="pageVO.total" :page.sync="pageQuery.pageNum"
      :limit.sync="pageQuery.pageSize" @pagination="getPage()" />
  </div>
</template>



<script>
  import Pagination from '@/components/Pagination'
  import * as api from '@/api/system/remote.js'
  export default {
    name: '',
    components: {
      Pagination
    },
    data() {
      return {
        // 查询的参数
        pageQuery: {
          pageSize: 10,
          pageNum: 1,
        },
        // 返回参数
        pageVO: {
          list: [], // 返回的列表
          total: 0, // 一共多少条数据
          pages: 0 // 一共多少页
        },
        // loading
        pageLoading: true,
        // 查询参数
        searchParam: {}
      }
    },
    mounted() {
      this.getPage()
    },
    methods: {
      status1(row, column) {
          if (row.status == 0) {
            return '正常'
          }
           if (row.status == 1) {
             return '异常'
           }
        },
      operatorType1(row, column) {
          if (row.operatorType == 0) {
            return '其它'
          }
           if (row.operatorType == 1) {
             return '后台用户'
           }
           if (row.operatorType == 2) {
             return '手机端用户'
           }
        },
      businessType1(row, column) {
          if (row.businessType == 0) {
            return '其它'
          }
           if (row.businessType == 1) {
             return '新增'
           }
           if (row.businessType == 2) {
             return '修改'
           }
           if (row.businessType == 3) {
             return '删除'
           }
        },
      getPage() {
        console.log('进入加载页面数据')
        this.pageLoading = true
        api.page({
          ...this.pageQuery,
          ...this.searchParam
        }).then(pageVO => {
          this.pageVO = pageVO
          this.pageLoading = false
        })
        console.log('进入加载页面数据')
        console.log(this.pageVO)
        console.log('进入加载页面数据')
      },
      // 刷新回调用
      refreshChange() {
        console.log('刷新回调')
        this.page = this.$refs.crud.$refs.tablePage.defaultPage
        this.getPage(this.page)
      }
    }
  }
</script>

<style scoped>
  /deep/.demo-table-expand {
    font-size: 0;
    padding-left: 50px;
  }

  /deep/.demo-table-expand label {
    width: 100px;
    color: #ad0000;
  }

  /deep/.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }
  /deep/.cell{
    height: 50px !important;
  }
</style>
